<template>
  <div class="cost-alert-page">
    <!-- 预警统计卡片 -->
    <el-row :gutter="20" class="overview-cards">
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="overview-card critical">
          <div class="card-content">
            <div class="card-icon">
              <el-icon size="32"><WarningFilled /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ alertStats.critical }}</div>
              <div class="card-label">紧急预警</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="overview-card warning">
          <div class="card-content">
            <div class="card-icon">
              <el-icon size="32"><Warning /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ alertStats.warning }}</div>
              <div class="card-label">警告提示</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="overview-card info">
          <div class="card-content">
            <div class="card-icon">
              <el-icon size="32"><InfoFilled /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ alertStats.info }}</div>
              <div class="card-label">提示信息</div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12" :md="6">
        <el-card class="overview-card handled">
          <div class="card-content">
            <div class="card-icon">
              <el-icon size="32"><CircleCheckFilled /></el-icon>
            </div>
            <div class="card-info">
              <div class="card-value">{{ alertStats.handled }}</div>
              <div class="card-label">已处理</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 预警规则配置 -->
    <el-card class="rule-card">
      <template #header>
        <div class="card-header">
          <span>预警规则配置</span>
          <el-button type="primary" size="small" @click="showRuleDialog">
            <el-icon><Plus /></el-icon>
            添加规则
          </el-button>
        </div>
      </template>
      <el-table :data="ruleData" border>
        <el-table-column prop="ruleName" label="规则名称" width="200" />
        <el-table-column prop="ruleType" label="规则类型" width="120">
          <template #default="{ row }">
            <el-tag :type="getRuleTypeTag(row.ruleType)">
              {{ row.ruleType }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="condition" label="触发条件" min-width="250" />
        <el-table-column prop="threshold" label="阈值" width="120" />
        <el-table-column prop="alertLevel" label="预警级别" width="100">
          <template #default="{ row }">
            <el-tag :type="getAlertLevelTag(row.alertLevel)">
              {{ row.alertLevel }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-switch 
              v-model="row.enabled" 
              @change="handleRuleStatusChange(row)"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="{ row }">
            <el-button type="primary" size="small" @click="handleEditRule(row)">
              编辑
            </el-button>
            <el-button type="danger" size="small" @click="handleDeleteRule(row)">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 预警列表 -->
    <el-card style="margin-top: 20px">
      <template #header>
        <div class="page-header">
          <h3>成本预警列表</h3>
          <div class="header-actions">
            <el-button type="primary" @click="handleRefresh">
              <el-icon><Refresh /></el-icon>
              刷新
            </el-button>
            <el-button @click="handleBatchHandle">
              <el-icon><Select /></el-icon>
              批量处理
            </el-button>
            <el-button @click="handleExport">
              <el-icon><Download /></el-icon>
              导出
            </el-button>
          </div>
        </div>
      </template>

      <!-- 筛选区域 -->
      <div class="filter-area">
        <el-form :model="filterForm" inline>
          <el-form-item label="预警级别">
            <el-select v-model="filterForm.alertLevel" placeholder="请选择预警级别" clearable>
              <el-option label="紧急" value="紧急" />
              <el-option label="警告" value="警告" />
              <el-option label="提示" value="提示" />
            </el-select>
          </el-form-item>
          <el-form-item label="预警类型">
            <el-select v-model="filterForm.alertType" placeholder="请选择预警类型" clearable>
              <el-option label="预算超支" value="预算超支" />
              <el-option label="成本异常" value="成本异常" />
              <el-option label="单位成本上涨" value="单位成本上涨" />
              <el-option label="库存积压" value="库存积压" />
            </el-select>
          </el-form-item>
          <el-form-item label="处理状态">
            <el-select v-model="filterForm.handleStatus" placeholder="请选择处理状态" clearable>
              <el-option label="未处理" value="未处理" />
              <el-option label="处理中" value="处理中" />
              <el-option label="已处理" value="已处理" />
              <el-option label="已忽略" value="已忽略" />
            </el-select>
          </el-form-item>
          <el-form-item label="日期范围">
            <el-date-picker
              v-model="filterForm.dateRange"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="handleFilter">
              <el-icon><Search /></el-icon>
              筛选
            </el-button>
            <el-button @click="handleResetFilter">
              <el-icon><Refresh /></el-icon>
              重置
            </el-button>
          </el-form-item>
        </el-form>
      </div>

      <!-- 预警时间轴 -->
      <el-timeline>
        <el-timeline-item
          v-for="alert in alertList"
          :key="alert.id"
          :timestamp="alert.alertTime"
          placement="top"
          :type="getTimelineType(alert.alertLevel)"
          :hollow="alert.handleStatus === '已处理'"
        >
          <el-card :class="['alert-card', `alert-${alert.alertLevel}`]">
            <div class="alert-header">
              <div class="alert-title">
                <el-icon size="20">
                  <component :is="getAlertIcon(alert.alertLevel)" />
                </el-icon>
                <span>{{ alert.alertTitle }}</span>
                <el-tag 
                  :type="getAlertLevelTag(alert.alertLevel)" 
                  size="small"
                  style="margin-left: 8px"
                >
                  {{ alert.alertLevel }}
                </el-tag>
              </div>
              <div class="alert-actions">
                <el-tag :type="getHandleStatusTag(alert.handleStatus)" size="small">
                  {{ alert.handleStatus }}
                </el-tag>
              </div>
            </div>
            <div class="alert-content">
              <p class="alert-description">{{ alert.description }}</p>
              <div class="alert-details">
                <el-descriptions :column="3" size="small">
                  <el-descriptions-item label="预警类型">
                    {{ alert.alertType }}
                  </el-descriptions-item>
                  <el-descriptions-item label="相关产品">
                    {{ alert.relatedProduct }}
                  </el-descriptions-item>
                  <el-descriptions-item label="超出阈值">
                    <span class="threshold-value">{{ alert.thresholdExceeded }}</span>
                  </el-descriptions-item>
                </el-descriptions>
              </div>
              <div class="alert-suggestion">
                <el-icon><Lamp /></el-icon>
                <span>建议措施：{{ alert.suggestion }}</span>
              </div>
            </div>
            <div class="alert-footer">
              <el-button 
                v-if="alert.handleStatus === '未处理'"
                type="primary" 
                size="small" 
                @click="handleAlert(alert)"
              >
                <el-icon><Select /></el-icon>
                处理
              </el-button>
              <el-button 
                v-if="alert.handleStatus === '未处理'"
                type="info" 
                size="small" 
                @click="handleIgnore(alert)"
              >
                <el-icon><Close /></el-icon>
                忽略
              </el-button>
              <el-button 
                size="small" 
                @click="handleViewDetail(alert)"
              >
                <el-icon><View /></el-icon>
                查看详情
              </el-button>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>

      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          :total="pagination.total"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>

    <!-- 处理预警对话框 -->
    <el-dialog
      v-model="handleDialogVisible"
      title="处理预警"
      width="600px"
    >
      <el-form
        ref="handleFormRef"
        :model="handleForm"
        :rules="handleRules"
        label-width="100px"
      >
        <el-form-item label="处理方式" prop="handleType">
          <el-select v-model="handleForm.handleType" placeholder="请选择处理方式" style="width: 100%">
            <el-option label="立即处理" value="立即处理" />
            <el-option label="制定计划" value="制定计划" />
            <el-option label="转交他人" value="转交他人" />
            <el-option label="暂时忽略" value="暂时忽略" />
          </el-select>
        </el-form-item>

        <el-form-item label="处理措施" prop="handleAction">
          <el-input 
            v-model="handleForm.handleAction" 
            type="textarea" 
            :rows="4"
            placeholder="请输入具体的处理措施" 
          />
        </el-form-item>

        <el-form-item label="预计完成时间" prop="expectedTime">
          <el-date-picker
            v-model="handleForm.expectedTime"
            type="datetime"
            placeholder="请选择预计完成时间"
            style="width: 100%"
            format="YYYY-MM-DD HH:mm"
            value-format="YYYY-MM-DD HH:mm"
          />
        </el-form-item>

        <el-form-item label="责任人" prop="assignee">
          <el-select v-model="handleForm.assignee" placeholder="请选择责任人" style="width: 100%">
            <el-option label="张三" value="张三" />
            <el-option label="李四" value="李四" />
            <el-option label="王五" value="王五" />
          </el-select>
        </el-form-item>

        <el-form-item label="备注">
          <el-input 
            v-model="handleForm.remark" 
            type="textarea" 
            :rows="2"
            placeholder="请输入备注信息" 
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="handleDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitHandle" :loading="handleLoading">
          确定
        </el-button>
      </template>
    </el-dialog>

    <!-- 添加规则对话框 -->
    <el-dialog
      v-model="ruleDialogVisible"
      title="添加预警规则"
      width="700px"
    >
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="ruleFormRules"
        label-width="120px"
      >
        <el-form-item label="规则名称" prop="ruleName">
          <el-input v-model="ruleForm.ruleName" placeholder="请输入规则名称" />
        </el-form-item>

        <el-form-item label="规则类型" prop="ruleType">
          <el-select v-model="ruleForm.ruleType" placeholder="请选择规则类型" style="width: 100%">
            <el-option label="预算控制" value="预算控制" />
            <el-option label="成本控制" value="成本控制" />
            <el-option label="库存控制" value="库存控制" />
            <el-option label="效率控制" value="效率控制" />
          </el-select>
        </el-form-item>

        <el-form-item label="触发条件" prop="condition">
          <el-input 
            v-model="ruleForm.condition" 
            type="textarea"
            :rows="3"
            placeholder="请输入触发条件，如：实际成本 > 预算 * 1.1" 
          />
        </el-form-item>

        <el-form-item label="阈值" prop="threshold">
          <el-input-number 
            v-model="ruleForm.threshold" 
            :min="0" 
            :precision="2"
            style="width: 100%"
            placeholder="请输入阈值"
          />
        </el-form-item>

        <el-form-item label="预警级别" prop="alertLevel">
          <el-radio-group v-model="ruleForm.alertLevel">
            <el-radio label="紧急">紧急</el-radio>
            <el-radio label="警告">警告</el-radio>
            <el-radio label="提示">提示</el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="通知方式">
          <el-checkbox-group v-model="ruleForm.notifyMethods">
            <el-checkbox label="站内消息" />
            <el-checkbox label="邮件通知" />
            <el-checkbox label="短信通知" />
            <el-checkbox label="企业微信" />
          </el-checkbox-group>
        </el-form-item>

        <el-form-item label="通知对象">
          <el-select v-model="ruleForm.notifyUsers" multiple placeholder="请选择通知对象" style="width: 100%">
            <el-option label="财务主管" value="财务主管" />
            <el-option label="成本会计" value="成本会计" />
            <el-option label="部门经理" value="部门经理" />
            <el-option label="总经理" value="总经理" />
          </el-select>
        </el-form-item>
      </el-form>

      <template #footer>
        <el-button @click="ruleDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSubmitRule">
          确定
        </el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 响应式数据
const handleDialogVisible = ref(false)
const ruleDialogVisible = ref(false)
const handleFormRef = ref()
const ruleFormRef = ref()
const handleLoading = ref(false)

// 预警统计
const alertStats = reactive({
  critical: 3,
  warning: 8,
  info: 12,
  handled: 45
})

// 筛选表单
const filterForm = reactive({
  alertLevel: '',
  alertType: '',
  handleStatus: '',
  dateRange: []
})

// 处理表单
const handleForm = reactive({
  handleType: '',
  handleAction: '',
  expectedTime: '',
  assignee: '',
  remark: ''
})

// 处理表单验证
const handleRules = {
  handleType: [
    { required: true, message: '请选择处理方式', trigger: 'change' }
  ],
  handleAction: [
    { required: true, message: '请输入处理措施', trigger: 'blur' }
  ]
}

// 规则表单
const ruleForm = reactive({
  ruleName: '',
  ruleType: '',
  condition: '',
  threshold: 0,
  alertLevel: '警告',
  notifyMethods: [],
  notifyUsers: []
})

// 规则表单验证
const ruleFormRules = {
  ruleName: [
    { required: true, message: '请输入规则名称', trigger: 'blur' }
  ],
  ruleType: [
    { required: true, message: '请选择规则类型', trigger: 'change' }
  ],
  condition: [
    { required: true, message: '请输入触发条件', trigger: 'blur' }
  ]
}

// 分页
const pagination = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 0
})

// 规则数据
const ruleData = ref([
  {
    id: 1,
    ruleName: '预算超支10%预警',
    ruleType: '预算控制',
    condition: '实际成本 > 预算金额 * 1.1',
    threshold: '110%',
    alertLevel: '警告',
    enabled: true
  },
  {
    id: 2,
    ruleName: '单位成本上涨20%预警',
    ruleType: '成本控制',
    condition: '当期单位成本 > 历史平均 * 1.2',
    threshold: '120%',
    alertLevel: '紧急',
    enabled: true
  },
  {
    id: 3,
    ruleName: '库存周转率低于标准',
    ruleType: '库存控制',
    condition: '库存周转率 < 标准值 * 0.8',
    threshold: '80%',
    alertLevel: '提示',
    enabled: false
  }
])

// 预警列表
const alertList = ref([
  {
    id: 1,
    alertTitle: '生产部材料成本预算超支预警',
    alertLevel: '紧急',
    alertType: '预算超支',
    description: '生产部1月份材料成本实际支出已超过预算15%，请及时采取措施控制成本。',
    relatedProduct: '智能手机X1',
    thresholdExceeded: '+15%',
    suggestion: '优化供应商采购策略，考虑批量采购降低单价，或寻找性价比更高的替代材料。',
    alertTime: '2024-01-20 14:30',
    handleStatus: '未处理'
  },
  {
    id: 2,
    alertTitle: '单位成本异常上涨预警',
    alertLevel: '警告',
    alertType: '成本异常',
    description: '平板电脑T1的单位成本相比上月上涨了22%，超过正常波动范围。',
    relatedProduct: '平板电脑T1',
    thresholdExceeded: '+22%',
    suggestion: '分析成本构成变化原因，检查是否有工艺流程问题或原材料价格异常上涨。',
    alertTime: '2024-01-19 16:45',
    handleStatus: '处理中'
  },
  {
    id: 3,
    alertTitle: '制造费用分摊异常',
    alertLevel: '提示',
    alertType: '成本异常',
    description: '制造费用分摊比例与预期存在偏差，建议核查费用归集和分摊方法。',
    relatedProduct: '智能手表W1',
    thresholdExceeded: '+8%',
    suggestion: '重新评估制造费用分摊标准，考虑采用作业成本法进行更精确的成本分摊。',
    alertTime: '2024-01-19 10:20',
    handleStatus: '已处理'
  },
  {
    id: 4,
    alertTitle: '库存周转率预警',
    alertLevel: '警告',
    alertType: '库存积压',
    description: '无线耳机E1的库存周转率持续低于正常水平，存在库存积压风险。',
    relatedProduct: '无线耳机E1',
    thresholdExceeded: '-35%',
    suggestion: '优化库存管理策略，采用JIT准时制生产，加强销售预测准确性。',
    alertTime: '2024-01-18 09:15',
    handleStatus: '已处理'
  }
])

// 方法
const getRuleTypeTag = (type) => {
  const map = {
    '预算控制': 'primary',
    '成本控制': 'success',
    '库存控制': 'warning',
    '效率控制': 'info'
  }
  return map[type] || 'info'
}

const getAlertLevelTag = (level) => {
  const map = {
    '紧急': 'danger',
    '警告': 'warning',
    '提示': 'info'
  }
  return map[level] || 'info'
}

const getHandleStatusTag = (status) => {
  const map = {
    '未处理': 'danger',
    '处理中': 'warning',
    '已处理': 'success',
    '已忽略': 'info'
  }
  return map[status] || 'info'
}

const getTimelineType = (level) => {
  const map = {
    '紧急': 'danger',
    '警告': 'warning',
    '提示': 'primary'
  }
  return map[level] || 'primary'
}

const getAlertIcon = (level) => {
  const map = {
    '紧急': 'WarningFilled',
    '警告': 'Warning',
    '提示': 'InfoFilled'
  }
  return map[level] || 'InfoFilled'
}

const handleRuleStatusChange = (row) => {
  ElMessage.success(row.enabled ? '规则已启用' : '规则已禁用')
}

const showRuleDialog = () => {
  ruleDialogVisible.value = true
  Object.assign(ruleForm, {
    ruleName: '',
    ruleType: '',
    condition: '',
    threshold: 0,
    alertLevel: '警告',
    notifyMethods: [],
    notifyUsers: []
  })
}

const handleEditRule = (row) => {
  ruleDialogVisible.value = true
  Object.assign(ruleForm, row)
}

const handleDeleteRule = async (row) => {
  try {
    await ElMessageBox.confirm('确定要删除该规则吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const index = ruleData.value.findIndex(item => item.id === row.id)
    if (index > -1) {
      ruleData.value.splice(index, 1)
      ElMessage.success('删除成功')
    }
  } catch {
    // 用户取消
  }
}

const handleSubmitRule = async () => {
  if (!ruleFormRef.value) return

  try {
    await ruleFormRef.value.validate()
    
    const newRule = {
      id: Date.now(),
      ...ruleForm,
      enabled: true
    }
    
    ruleData.value.unshift(newRule)
    ElMessage.success('规则添加成功')
    ruleDialogVisible.value = false
  } catch (error) {
    console.error('表单验证失败:', error)
  }
}

const handleAlert = (alert) => {
  handleDialogVisible.value = true
  Object.assign(handleForm, {
    handleType: '',
    handleAction: '',
    expectedTime: '',
    assignee: '',
    remark: ''
  })
}

const handleIgnore = async (alert) => {
  try {
    await ElMessageBox.confirm('确定要忽略该预警吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    })
    
    const index = alertList.value.findIndex(item => item.id === alert.id)
    if (index > -1) {
      alertList.value[index].handleStatus = '已忽略'
      ElMessage.success('已忽略该预警')
    }
  } catch {
    // 用户取消
  }
}

const handleViewDetail = (alert) => {
  ElMessage.info('查看预警详情')
}

const handleSubmitHandle = async () => {
  if (!handleFormRef.value) return

  try {
    await handleFormRef.value.validate()
    handleLoading.value = true

    await new Promise(resolve => setTimeout(resolve, 1000))

    ElMessage.success('预警处理提交成功')
    handleDialogVisible.value = false
  } catch (error) {
    console.error('表单验证失败:', error)
  } finally {
    handleLoading.value = false
  }
}

const handleFilter = () => {
  pagination.currentPage = 1
  ElMessage.success('筛选完成')
}

const handleResetFilter = () => {
  Object.assign(filterForm, {
    alertLevel: '',
    alertType: '',
    handleStatus: '',
    dateRange: []
  })
  handleFilter()
}

const handleRefresh = () => {
  ElMessage.success('刷新成功')
}

const handleBatchHandle = () => {
  ElMessage.info('批量处理功能开发中')
}

const handleExport = () => {
  ElMessage.success('导出成功')
}

const handleSizeChange = (size) => {
  pagination.pageSize = size
}

const handleCurrentChange = (page) => {
  pagination.currentPage = page
}

// 生命周期
onMounted(() => {
  pagination.total = alertList.value.length
})
</script>

<style scoped>
.cost-alert-page {
  padding: 0;
}

.overview-cards {
  margin-bottom: 20px;
}

.overview-card {
  border: none;
  cursor: pointer;
  transition: all 0.3s;
}

.overview-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.overview-card.critical {
  background: linear-gradient(135deg, #ff6b6b 0%, #ee5a24 100%);
  color: white;
}

.overview-card.warning {
  background: linear-gradient(135deg, #ffd93d 0%, #f39c12 100%);
  color: white;
}

.overview-card.info {
  background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%);
  color: white;
}

.overview-card.handled {
  background: linear-gradient(135deg, #55efc4 0%, #00b894 100%);
  color: white;
}

.card-content {
  display: flex;
  align-items: center;
  padding: 8px 0;
}

.card-icon {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
}

.card-info {
  flex: 1;
}

.card-value {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 4px;
}

.card-label {
  font-size: 16px;
  opacity: 0.9;
}

.rule-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h3 {
  margin: 0;
  color: #303133;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.filter-area {
  margin-bottom: 24px;
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
}

.alert-card {
  border-left: 4px solid;
  transition: all 0.3s;
}

.alert-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.alert-card.alert-紧急 {
  border-left-color: #f56c6c;
  background: #fef0f0;
}

.alert-card.alert-警告 {
  border-left-color: #e6a23c;
  background: #fdf6ec;
}

.alert-card.alert-提示 {
  border-left-color: #409eff;
  background: #ecf5ff;
}

.alert-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.alert-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.alert-content {
  margin-bottom: 16px;
}

.alert-description {
  margin: 0 0 12px;
  color: #606266;
  line-height: 1.6;
}

.alert-details {
  margin-bottom: 12px;
  padding: 12px;
  background: white;
  border-radius: 4px;
}

.threshold-value {
  font-weight: 600;
  color: #f56c6c;
}

.alert-suggestion {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background: #e1f3d8;
  border-radius: 4px;
  color: #67c23a;
}

.alert-suggestion span {
  flex: 1;
  color: #606266;
}

.alert-footer {
  display: flex;
  gap: 8px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>

